<template>
  <div id="container">
    <h2>实施拥堵指数变化</h2>
    <div class="radio">
      <input type="radio" id="today" name="day" value="今天" />
      <label for="today">今天</label>
      <input type="radio" id="nsday" name="day" value="近七天" />
      <label for="nsday">近七天</label>
    </div>
    <div :id="id" class="orderArea"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      id: "lineChart",
      myChart: null,
    };
  },
  mounted() {
    this.loadChart();
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    loadChart() {
      this.$nextTick(() => {
        this.myChart = echarts.init(document.getElementById(this.id));
        this.myChart.setOption(this.initOption());
      });
    },
    initOption() {
      let data = {
        // title: {
        //   text: "实施拥堵指数变化",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "00:00",
              "02:00",
              "04:00",
              "06:00",
              "08:00",
              "10:00",
              "12:00",
            ],
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          max: 1.8,
          min: 1,
          interval: 0.2,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "实施拥堵指数变化",
            type: "line",
            areaStyle: {
              normal: {
                color: "rgb(214,234,254)", //改变区域颜色
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(214,234,254)", //改变折线点的颜色
                lineStyle: {
                  color: "rgb(106,169,249)", //改变折线颜色
                },
              },
            },
            stack: "总量",

            areaStyle: { normal: {} },
            data: [1.1, 1.24, 1.4, 1.58, 1.18, 1.34, 1.48],
          },
        ],
      };
      return data;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
#container {
  width: 66%;
  height: 340px;
  margin-left: 10px;
  background-color: #fff;

  .orderArea {
    width: 100%;
    height: 260px;
  }
  h2 {
    font-size: 18px;
    margin: 15px 0px;
    font-weight: bold;
  }
  .radio {
    :nth-child(2) {
      margin-right: 8px;
    }
    :nth-child(3) {
      margin-left: 8px;
    }
  }
}
</style>